<template>
  <swiper
      :modules="modules"
      :slides-per-view="1"
      :space-between="1"
      :loop="true"
      :autoplay="{
          delay: 5000,
          disableOnInteraction: false,
        }"
      :pagination="{ clickable: true }"
      class="mybanner"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
  >
    <swiper-slide v-for="(item, index) in props.data" :key="index">

        <img :src="item.src" alt="">

    </swiper-slide>
  </swiper>
</template>

<script setup>
// import Swiper core and required modules
import {Autoplay, Pagination} from 'swiper';

// Import Swiper Vue.js components
import {Swiper, SwiperSlide} from 'swiper/vue';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import {ref} from "vue";

const onSwiper = (swiper) => {
  console.log(swiper);
};
const onSlideChange = () => {
  console.log('slide change');
};

const modules = ref([Pagination, Autoplay])

const props = defineProps(["data"])


</script>

<style scoped>

</style>
